<template>
    <el-dialog v-model="dialogVisible" title="修改方案保单号" width="350px" destroy-on-close :close-on-click-modal="false">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" :readonly="i.readonly" />
                    <el-date-picker v-if="i.type === 'date'" class="reset-full flex flex-1" clearable v-model="i.value"
                        :type="i.dateType || 'date'" :value-format="i.valueFormat"
                        :placeholder="i.placeholder || '请选择日期'" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'

import uploadImage from '@/components/uploadImage/index.vue'

import { addAccount, updateAccount } from 'api/tools/manageAccount.ts'
import { updatePolicy } from 'api/insure/longTerm.ts'
const formRef = ref(null)

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    curItem: {
        type: Object
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const formDataBase = {
    insureCompanyType: {
        label: '保司编码',
        prop: 'insureCompanyType',
        type: 'input',
        placeholder: '请输入保司编码',
        inputType: 'text',
        value: '',
        readonly: true
    },
    planName: {
        label: '方案名称',
        prop: 'planName',
        type: 'input',
        placeholder: '请输入方案名称',
        inputType: 'text',
        value: '',
        readonly: true
    },
    planCode: {
        label: '方案编号',
        prop: 'planCode',
        type: 'input',
        placeholder: '请输入方案编号',
        inputType: 'text',
        value: '',
        readonly: true
    },
    policyNo: {
        label: '保单号',
        prop: 'policyNo',
        type: 'input',
        placeholder: '请输入保单号',
        inputType: 'text',
        value: ''
    },
    yearMonth: {
        label: '生效年月',
        prop: 'yearMonth',
        type: 'date',
        placeholder: '请选择生效年月',
        dateType: 'month',
        valueFormat: 'YYYY-MM',
        value: ''
    },

}

const formData = ref()

formData.value = cloneDeep(formDataBase)

const rules = ref({
    'policyNo.value': [
        {
            required: true,
            trigger: 'blur',
            message: '保单号不能为空'
        }
    ],
    'yearMonth.value': [
        {
            required: true,
            trigger: 'change',
            message: '生效年月不能为空'
        }
    ],
})


const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            handleAddAccount()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const handleAddAccount = () => {
    const data = {
        id: props.curItem.id
    }
    for (const key in formData.value) {
        data[formData.value[key].prop] = formData.value[key].value
    }
    console.log(2121, data)
    updatePolicy(data).then(res => {
        emits('success')
        ElMessage({
            message: '新增成功',
            type: 'success',
        })
        dialogVisible.value = false
    })
}

const initForm = () => {
    for (const key in formData.value) {
        formData.value[key].value = ''
    }
}

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval && props.type === 'add') {
        formData.value = cloneDeep(formDataBase)
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})

watch(() => props.curItem, (newval) => {
    if (newval) {
        for (const key in formData.value) {
            formData.value[key].value = newval[key]
        }
    }
}, {
    immediate: true,
    deep: true
})

</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}

:deep(.reset-full .el-input__wrapper) {
    display: flex;
}
</style>